<template>
    <div>
        <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
        <el-row>
            <el-col>
                <el-button type="primary" @click="addCatetory()">添加分类</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
            <!-- 操作 -->
            <template slot="setting" slot-scope="scope">
               <el-button type="primary" @click="editCate(scope.row)" size="mini"><i class="el-icon-edit"></i><span style="margin-left:5px">编辑</span></el-button>
               <el-button type="danger" @click="deleteCate(scope.row)" size="mini"><i class="el-icon-delete"></i><span style="margin-left:5px">删除</span></el-button>
            </template>
            <!-- 排序 -->
            <template slot="Order" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
                <el-tag v-if="scope.row.cat_level==1" type="success">二级</el-tag>
                <el-tag v-if="scope.row.cat_level==2" type="warning">三级</el-tag>
            </template>
            <!-- 是否有效 -->
            <template slot="isOk" slot-scope="scope">
                <i v-if="scope.row.cat_deleted==false" class="el-icon-circle-check" style="font-size:16px;color:lightgreen"></i>
                <i v-if="scope.row.cat_deleted==true" class="el-icon-circle-close" style="font-size:16px;color:red"></i>    
            </template>
        </tree-table>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pagenum"
            :page-sizes="[3, 5, 8, 10]"
            :page-size="queryParams.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="dialogVisible"
            width="50%"
            @close="coloseAddCateDialog()"
            >
            <el-form ref="AddCateForm1" :model="AddCateForm" :rules="addRules" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="AddCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="分类父级">
                    <el-cascader
                        checkStrictly: true 
                        expand-trigger="hover"
                        v-model="handleValue"
                        :options="parentList"
                        :props="cascaderProps"
                        checkStrictly
                        clearable
                        :change-on-select="true"
                        @change="handleChange">
                    </el-cascader>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog
            title="编辑分类"
            :visible.sync="editDialogVisible"
            width="50%"
            >
            <el-form ref="editform" :model="Editform" :rules="addRules" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="Editform.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
    </div>
</template>
<script>
export default {
    data(){
        return{
            queryParams:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            cateList:[],
            total:0,
            dialogVisible:false,
            editDialogVisible:false,
            AddCateForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
                
            },
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //编辑用户
            Editform:{},
            handleValue:[],
            parentList:[],
            cataList1:[],
            addRules:{
                cat_name:[  
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                    type:'template',
                    template:'isOk'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'Order'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'setting'
                }   
            ]
        }
    },  
    created(){
        this.getCatetoryList();
    },
    methods:{
        //删除分类
        async deleteCate(cate){
            var confirm=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(confirm!=='confirm') return this.$message.info('已取消删除')
            var {data:res}=await this.$http.delete('categories/'+cate.cat_id);
             if(res.meta.status!==200) return this.$message.error('删除失败');
             this.$message.success('删除成功');
             this.getCatetoryList();
        },
        //提交编辑
        editSubmit(){
            this.$refs.editform.validate(async valid=>{
                if(!valid) return; 
                const {data:res}=await this.$http.put('categories/'+this.Editform.cat_id,{
                    cat_name:this.Editform.cat_name
                });
                if(res.meta.status!==200) return this.$message.error('修改失败');
                 this.$message.success('修改成功');
                 this.getCatetoryList();
                 this.editDialogVisible=false;
            })
        },
        //编辑用户
        editCate(cate){
            this.Editform=cate;
            this.editDialogVisible=true;
        },
        //添加分类
        addCate(){
            this.$refs.AddCateForm1.validate(async valid=>{
                if(!valid) return ;
                 const {data:res}=await this.$http.post('categories',this.AddCateForm);
                 if(res.meta.status!==201) return this.$message.error('添加失败');
                 this.$message.success('添加成功');
                this.getCatetoryList();
                 this.dialogVisible=false;
            })
            
        },
        handleChange(){
           if(this.handleValue.length>0){
               this.AddCateForm.cat_pid=this.handleValue[this.handleValue.length-1];
               this.AddCateForm.cat_level=this.handleValue.length;
           }else{
               this.AddCateForm.cat_pid=0;
               this.AddCateForm.cat_level=0;
           }
        },
        //获取分类级联数据
        async getCateList(){
            const {data:res}=await this.$http.get('categories',{params:{type:2}});
            if(res.meta.status!==200) return this.$message.error('获取级联数据失败');
            this.parentList=res.data;
            console.log(this.parentList)
        },
        //关闭对话框
        coloseAddCateDialog(){
            this.$refs.AddCateForm1.resetFields();
            this.handleValue=[];
            this.AddCateForm.cat_pid=0;
            this.AddCateForm.cat_level=0;
        },
        //添加分类
        addCatetory(){
            this.getCateList();
            this.dialogVisible=true
        },
        //获取商品分类数据
        async getCatetoryList(){
            const {data:res}=await this.$http.get('categories',{params:this.queryParams});
            if(res.meta.status!==200)return this.$message.error('获取商品分类数据失败')
            this.cateList=res.data.result;
            this.total=res.data.total;
        },
        //分页
        handleSizeChange(val){
            this.queryParams.pagesize=val
            this.getCatetoryList();
        },
        handleCurrentChange(val){
            this.queryParams.pagenum=val
            this.getCatetoryList();
        }
    }
}
</script>
<style lang="less" scoped>
.el-row{
    margin-bottom: 20px;
}
.el-cascader{
    width: 100%;
}
</style>